import React from 'react'
import style from './style'
import cx from 'classnames'
import rule, { msg } from './rule'
import util from '../../util'
import rules from '../../libs/rule'
import {FieldContainer, FieldBox} from '../form'

export default
class Input extends React.Component {

	static defaultProps = {
		raised: true,
		onChange: () => {},
		onFocus: () => {},
		onBlur: () => {}
	}

	handleFocus(e) {
		this.setState({
			active: true
		})
		this.props.onFocus(e)
	}

	focus() {
		this.refs.input.focus()
	}

  // 不对空值作验证
  _validate() {
    const value = this.value()
    const pass = util.isNull(value) || !this.regex || this.regex.exec(value)

    if (!pass) {
      this.setState({
        error: true,
        active: true,
        msg: this.rule.msg || this.props.error
      })
    } else {
      this.setState({
        error: false
      })
    }

    return pass
  }

  _required() {
    let ret
    if ((ret = util.isNull(this.value()))) {
      this.setState({
        active: true,
        error: true,
        msg: '必填'
      })
    } else {
      this.setState({
        error: false
      })
    }
    return !ret
  }

	handleBlur(e) {
		this.setState({
			active: false,
			filled: this.value()
		})

    this._validate()
		
		this.props.onBlur(e)
	}

	value() {
		return this.refs.input.value
	}

	constructor(props) {
		super(props)
		this.state = {
			error: false,
      active: false
		}

    this.rule = rules[props.name] || {}

		const regex = props.regex? new RegExp(props.regex): this.rule.regex
		if (regex) {
			this.regex = regex
		}
	}

	error(msg) {
		this.setState({
			error: true,
			msg
		})
	}

	componentDidMount() {
		if (this.props.value || this.props.defaultValue) {
      this.setState({
        filled: true
      })
      if (this.props.autoFocus) {
        setTimeout(() => {
          this.setState({
            active: true
          })
          this.refs.input.focus()
        }, 150)
      }
		}
	}

  componentWillReceiveProps(props) {
    if (!this.props.value && props.value) {
      this.setState({
        filled: true
      })
      if (props.autoFocus) {
        setTimeout(() => {
          this.setState({
            active: true
          })
          this.refs.input.focus()
        }, 150)
      }
    }
  }

	reset() {
		this.refs.input.blur()
		this.setState({
			filled: false,
			active: false,
			error: false
		})
	}

  handleChange(e) {
    this.props.onChange(e, e.target.value);
  }
  componentDidUpdate() {
    const {multi,autoHeight} = this.props;
    if(!multi || !autoHeight) return;
    const textareaDom = this.refs.input;
    textareaDom.style.height = 'auto';
    textareaDom.style.height = textareaDom.scrollHeight+'px';
  }
	render() {
		const { lineStyle,tip, disabled, required,placeholder, multi,type='text',
       width,attr, name, regex, className, label, error, bubbleList, raised, ...others } = this.props
		let fidldItem;
    if (multi) {
      const {autoHeight} = this.props;
      let props = {};
      if(autoHeight) {
        props = {
          style: {
            paddingTop: 0,
            paddingBottom: '5px',
            minHeight: '0px',
          },
          rows: 1,
        }
      };
      fidldItem = (
        <textarea 
          {...others}
          ref={'input'}
          name={name}
          data-role="textarea"
          className={cx({
            [style.textarea]: true,
          })} 
          disabled={disabled}
          placeholder={placeholder}
          onChange={::this.handleChange}
          onFocus={::this.handleFocus}
          onBlur={::this.handleBlur}
          {...props}
        />
      );
		} else {
      fidldItem = (
        <input 
          {...others}
          ref='input'
          type={type}
          name={name}
          className={cx({
            [style.input]: true,
          })} 
          disabled={disabled}
          placeholder={placeholder}
          onChange={::this.handleChange}
          onFocus={::this.handleFocus}
          onBlur={::this.handleBlur}
        />
      );
      /*
			return (
				<div 
          data-role="input"
					className={cx({
						[style.root]: true,
						[className]: !!className,
						[style.active]: this.state.active,
						[style.filled]: this.state.filled,
						[style.error]: this.state.error
					})}
        >
					<input 
						{...others}
            onChange={::this.handleChange}
						ref='input'
						type={type}
						onFocus={::this.handleFocus}
						onBlur={::this.handleBlur}/>
					<span className={style.label}>{label}</span>
					<span className={style.msg}>{this.state.msg}</span>
					{
						required?
						<span className={style.attr}>必填</span>: null
					}
				</div>
			)*/
		}
    return (
        <FieldBox
          className={cx({
            [this.props.className]: this.props.className
          })}
          label={label}
          name={name}
          required={required}
          tip={tip}
        >
          <FieldContainer
            hasBox={true}
            active={this.state.active}
            error={this.state.error}
            disabled={disabled}
            msg={this.state.msg}
            className={className}
            bubbleList={bubbleList}
            width={width}
            lineStyle={lineStyle}
          >
            {fidldItem}
          </FieldContainer>
        </FieldBox>
      )
	}
}
